<template>
  <div class="flex align-center justify-end custom_page">
    <span class="total">共{{pageTotal}}页</span>
    <span class="total">共{{total}}条</span>
    <button
      v-if="pageTotal>1"
      type="button"
      class="page_btn"
      @click="goFirst"
    >首页</button>
    <el-pagination
      class="text-right"
      prev-text="上一页"
      next-text="下一页"
      :page-size="pageSize"
      :page-sizes="pageList"
      :total="total"
      background
      :layout="layout"
      :current-page.sync="page"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
    <button
      v-if="pageTotal>1"
      type="button"
      class="page_btn"
      @click="goEnd"
    >尾页</button>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      pageList: [5, 10, 20, 50, 100]
    }
  },
  computed: {
    pageTotal() {
      const num = Math.ceil(this.total / this.pageSize);
      return num > 0 ? num : 1;
    },
    layout() {
      if (this.total === 0) {
        return "prev, pager, next"
      }
      if (this.pageTotal > 1) {
        return "sizes, prev, pager, next, jumper"
      }
      return "sizes, prev, pager, next"
    }
  },
  methods: {
    changePageSize(val) {
      this.pageSize = val;
      if (this.pageList.indexOf(val) === -1) {
        this.pageList.unshift(val);
      }
    },
    goEnd() {
      this.page = this.pageTotal;
      this.$emit("getList");
    },
    goFirst() {
      this.page = 1;
      this.$emit("getList");
    },
    handleSizeChange(val) {
      this.page = 1;
      this.pageSize = val;
      this.$emit("getList");
    },
    handleCurrentChange(val) {
      this.page = val;
      this.$emit("getList");
    }
  }
}
</script>

<style lang="scss">
.custom_page {
  margin-top: 15px;
  .total {
    margin-right: 10px;
  }
  .page_btn {
    color: #333333;
    background: #ffffff;
    border: 1px solid #eeeeee;
    font-size: 14px;
    padding-left: 12px;
    padding-right: 12px;
    min-width: 30px;
    border-radius: 2px;
    height: 28px;
    vertical-align: top;
    cursor: pointer;
  }
  .el-pagination__jump {
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>
